<template>
    <view class="">
		<view class="card" v-for="(item,index) in coupons" :key="index" @tap="jump(item)">
			<view class="left">
				<view class="status x-c pa" v-if="!item.shop_id">通用</view>
				<view class="status x-c pa" v-if="item.shop_id">商家</view>
				<image src="/static/image/money.png"></image>
				<view class="text">
					<view class="name one-n">{{item.coupon_name}}</view>
					<view class="date pr">有效期至{{item.use_end_time}}</view>
					<view class="type_content x-f">
						<view class="type pr">使用规则</view>
						<image :src="arrow_right" mode=""></image>
					</view>
				</view>
			</view>
			<view class="right pr">
				<view class="score" :class="{'showUse': item.status === 2,'showScore': item.status === 3}">
                    <span class="num">{{item.points}}</span>
                    <span class="name1">积分</span></view>
				<view class="btn pa" 
                    v-if="item.status === 1"> 
                    立即使用
                </view><view class="btn pa" 
                    :class="{'showUse': item.status === 2}" 
                    v-if="item.status === 2" @tap.stop="tip"> 
                    立即使用
                </view>
				<view class="btn pa" 
                    :class="{'showUse1': item.status === 3}" 
                    @tap.stop="tipOver" v-if="item.status === 3">
                    立即使用
                </view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				arrow_right: this.imgUrl + 'arrow_right.png',
				useUrl: '/pages/user/coupons/detail/index'
			};
		},
		props: {
			coupons: {
				type: Array,
				default: []
			},
		},
		methods: {
			// 提示优惠券已过期
			tipOver() {
				this.$tools.toast('优惠券已过期')
			},
			// 提示优惠券已使用
			tip() {
				this.$tools.toast('优惠券已使用')
			},
			jump(item) {
				this.$store.dispatch('user/get_couponsDetail',item)
			    this.$Router.push({
			        path: this.useUrl
			    })
			},
		}

	};
</script>

<style scoped lang="scss">
	.showDate {
		color: #999;
	}
	.showUse1 {
		background: linear-gradient(90deg,#bfbfbf 8%, #dddddd 96%)!important;
	} 
	.showUse {
		opacity: 0.4;
	}
	.showScore {
		color: #999!important;
	}
	.card {
		margin-bottom: 16rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 22rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			.status {
				width: 41px;
				height: 18px;
				background: linear-gradient(90deg,#ff977b, #ff504c);
				border-radius: 6px 0px 14px 0px;
				font-size: 24rpx;
				color: #fff;
			}
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 12rpx;
			}
			.text {
				padding: 0 0 0 12rpx;
				.name {
					width: 300rpx;
					min-height: 65rpx;
					font-weight: 700;
				}
				.date {
					font-size: 24rpx;
					padding: 20rpx 0 34rpx 0;
					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 60rpx;
						width: 498rpx;
						border: 1rpx dashed #dcdcdc;
					}
				}
				.type_content {
					image {
						position: relative;
						left: -20rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
				.type {
					color: #999;
					font-size: 22rpx;
				}
			}
		}
		.right {
			.score {
				color: #e93323;
				.num {
					font-weight: 600;
					font-size: 42rpx;
				}
			}
			.btn {
				width: 132rpx;
				height: 42rpx;
				right: 0;
				top: 75rpx;
				background: linear-gradient(90deg,#ff2d1b 8%, #ff977b 96%);
				border-radius: 22rpx;
				color: #fff;
				font-size: 22rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		

	}

</style>